<template>
  <div class="log_bg">
    <div class="top">
      <div class="logo">
        <a href="Index.html"
          ><img src="http://192.168.1.146:8088/logo.png"
        /></a>
      </div>
    </div>
    <div class="login">
      <div class="log_img">
        <img
          src="http://192.168.1.146:8088/l_img.png"
          width="611"
          height="425"
        />
      </div>
      <div class="log_c">
        <form>
          <table
            border="0"
            style="width: 370px; font-size: 14px; margin-top: 30px"
            cellspacing="0"
            cellpadding="0"
          >
            <tr height="50" valign="top">
              <td width="55">&nbsp;</td>
              <td>
                <span class="fl" style="font-size: 24px">登录</span>
                <span class="fr"
                  >还没有商城账号，
                  <router-link style="color: #ff4e00" to="/regist"
                    >立即注册</router-link
                  >
                </span>
              </td>
            </tr>
            <tr height="70">
              <td>用户名</td>
              <td>
                <input
                  type="text"
                  v-model="user.loginName"
                  class="l_user"
                  @blur="checkLoginName()"
                />
                <span v-if="errors.loginName" style="color: red">{{
                  errors.loginName
                }}</span>
              </td>
            </tr>
            <tr height="70">
              <td>密&nbsp; &nbsp; 码</td>
              <td>
                <input
                  type="password"
                  v-model="user.password"
                  class="l_pwd"
                  @blur="checkPassword()"
                />
                <span v-if="errors.password" style="color: red">{{
                  errors.password
                }}</span>
              </td>
            </tr>
            <tr>
              <td
                colspan="2"
                style="font-size: 14px; padding-top: 20px; white-space: nowrap"
              >
                <span
                  v-if="errors.loginError"
                  style="color: red; margin-left: 40px; width: 100%"
                >
                  {{ errors.loginError }}
                </span>
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td style="font-size: 12px; padding-top: 20px">
                <span style="font-family: '宋体'" class="fl">
                  <label class="r_rad"><input type="checkbox" /></label
                  ><label class="r_txt">请保存我这次的登录信息</label>
                </span>
                <span class="fr"
                  ><a href="#" style="color: #ff4e00">忘记密码</a></span
                >
              </td>
            </tr>
            <tr height="60">
              <td>&nbsp;</td>
              <td>
                <input
                  type="submit"
                  value="登录"
                  class="log_btn"
                  @click.prevent="login()"
                />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    return {
      user: {
        loginName: "",
        password: "",
      },
      errors: {
        loginName: "",
        password: "",
        loginError: "",
      },
      tipColor: "red",
    };
  },
  methods: {
    checkLoginName() {
      if (this.user.loginName == "") {
        this.errors.loginName = "用户名不能为空";
        this.tipColor = "red";
        return;
      }
      this.errors.loginName = "";
    },
    checkPassword() {
      if (this.user.password == "") {
        this.errors.password = "密码不能为空";
        this.tipColor = "red";
        return;
      }
      this.errors.password = "";
    },
    login() {
      this.checkLoginName();
      this.checkPassword();
      if (!(this.errors.loginName == "" && this.errors.password == "")) {
        alert("请输入有效的登录信息！");
        return;
      }
      this.$axios
        .post("/api/user/login", {
          loginName: this.user.loginName,
          password: this.user.password,
        })
        .then((response) => {
          if (response.data.code == 5001) {
            this.errors.loginError = response.data.msg;
          } else {
            alert("登录成功！");
            window.sessionStorage.setItem("token", response.data.token);
            window.sessionStorage.setItem("user", response.data.user);
            
            this.$router.push("/");
          }
        });
    },
  },
};
</script>

<style></style>
